/**
 * @description enquire.js-响应css媒体查询的轻量级javascript库，判断页面类型
 * 安装： npm install enquire.js
 * API:
 * enquire.register(mediaQuery, handler).
 * mediaQuery: 字符串，需要响应的媒体。
 * handler: 函数或对象，
 * enquire.unregister(mediaQuery[, handler])
 * mediaQuery: 字符串，需要注销响应的媒体。
 * handler: 函数或对象，可不写，一旦写了，只有这个handler被注销
 * handler Object:
 * destory: 当handler是unregister状态时响应。
 * deferSetup: 布尔值。默认false,设置为true时，推迟执行setup里的回调，直到第一次match时才执行。
 * setup: 函数。
 * 一般情况下，如果当match时需要请求数据，改变UI。变成unmatch不需要显示UI,再变回match,又要再一次请求数据,显示UI,请求数据就会有很多次。setup的存在就是让数据只需要请求一次，将数据与UI的显示分离开来。即在setup中请求数据,在match中显示UI,setup的回调是只会执行一次的。
 * match: 函数。媒体匹配时的回调。
 * unmatch: 函数。媒体不匹配时的回调。
 * 主要使用的方法为 register。
 */
// 设置媒体查询条件
// @media screen and (min-width: 320px) {html{font-size:50px;}}
// @media screen and (min-width: 360px) {html{font-size:56.25px;}}
// @media screen and (min-width: 375px) {html{font-size:58.59375px;}}
// @media screen and (min-width: 400px) {html{font-size:62.5px;}}
// @media screen and (min-width: 414px) {html{font-size:64.6875px;}}
// @media screen and (min-width: 440px) {html{font-size:68.75px;}}
// @media screen and (min-width: 480px) {html{font-size:75px;}}
// @media screen and (min-width: 520px) {html{font-size:81.25px;}}
// @media screen and (min-width: 560px) {html{font-size:87.5px;}}
// @media screen and (min-width: 600px) {html{font-size:93.75px;}}
// @media screen and (min-width: 640px) {html{font-size:100px;}}
// @media screen and (min-width: 680px) {html{font-size:106.25px;}}
// @media screen and (min-width: 720px) {html{font-size:112.5px;}}
// @media screen and (min-width: 760px) {html{font-size:118.75px;}}
// @media screen and (min-width: 800px) {html{font-size:125px;}}
// @media screen and (min-width: 960px) {html{font-size:150px;}}
// enquire
// .register('screen and (max-width: 576px)', matchTV)
// .register('screen and (max-width: 576px)', matchMobile)
// .register('screen and (min-width: 576px) and (max-width: 1199px)', matchLablet)
// .register('screen and (min-width: 1200px)', matchDesktop)

// 引入媒体查询库
import enquire from 'enquire.js'
// 引入媒体查询条件
import base from '@/config/base.config'
export const DEVICE_TYPE = {
  // 电视
  TV: 'tv',
  // 桌面应用
  DESKTOP: 'desktop',
  // 平板电脑
  TABLET: 'tablet',
  // 移动设备
  MOBILE: 'mobile'
}
// 根据媒体查询匹配类型
export const deviceEnquire = function (callback) {
  // 匹配电视设备
  const matchTV = {
    // 当媒体查询与上述匹配时，即当窗口宽度小于45em时的响应
    match: () => {
      callback && callback(DEVICE_TYPE.TV)
    },
    // 当窗口从匹配调整到不匹配以后的响应
    unmatch: () => {
      console.log('媒体匹配失败!')
    },
    // 只会响应一次，when the handler is registered?
    setup: () => {
      // this.$notification.open({
      //   message: 'Notification Title',
      //   description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      //   icon: <a-icon type="smile" style="color: #108ee9" />
      // })
    },
    // 布尔值。默认false,设置为true时，推迟执行setup里的回调，直到第一次match时才执行。
    deferSetup: true,
    // 当handler是unregister状态时响应。
    destroy: () => {
      console.log('正在匹配中!')
    }
  }
  // 匹配桌面设备
  const matchDesktop = {
    match: () => {
      callback && callback(DEVICE_TYPE.DESKTOP)
    },
    unmatch: () => {
      console.log('媒体匹配失败!')
    }
  }
  // 匹配平板设备
  const matchLablet = {
    match: () => {
      callback && callback(DEVICE_TYPE.TABLET)
    },
    unmatch: () => {
      console.log('媒体匹配失败!')
    }
  }
  // 匹配移动设备
  const matchMobile = {
    match: () => {
      callback && callback(DEVICE_TYPE.MOBILE)
    },
    unmatch: () => {
      console.log('媒体匹配失败!')
    }
  }
  // 设置查询条件
  /* iphone4 4s */
  // const iphone4sQuery ='screen and (device-height :480px) and (-webkit-device-pixel-ratio:2)'
  /* iphone5 */
  // const iphone5Query ='(device-height:568px) and (-webkit-min-device-pixel-ratio:2)'
  /* iphone6 */
  // const iphone6Query ='(min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2)'
  /* iphone6+ */
  // const iphone6pQuery ='(min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3)'
  /* iPads (portrait)  */
  // const iPadslandscapeQuery ='screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)'
  /* iPads (landscape)  */
  // const iPadsPortraitQuery ='screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)'
  /* iPads (portrait and landscape) */
  // const iPadsPortraitandlandscapeQuery ='screen and (min-device-width : 768px) and (max-device-width : 1024px)'
  /* 魅族 */
  // const mate7Query =' screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5)'
  /* mate7 */
  // const mate7Query =' screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3)'
  // 电视媒体查询
  const tvQuery = (base && base.query && base.query.tv) || 'screen and (min-width: 1200px)'
  // 大屏媒体查询
  const desktopQuery = (base && base.query && base.query.desktop) || 'screen and (min-width: 992px) and (max-width: 1199px)'
  // iPad媒体查询
  const tabletQuery = (base && base.query && base.query.tablet) || 'screen and (min-width: 768px) and (max-width: 991px)'
  // 移动媒体查询
  const mobileQuery = (base && base.query && base.query.mobile) || 'screen and (min-width: 480px) and (max-width: 767px)'
  // 终端判断
  enquire
    .register(tvQuery, matchTV)
    .register(desktopQuery, matchDesktop)
    .register(tabletQuery, matchLablet)
    .register(mobileQuery, matchMobile)
}
